<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <button @click="add('a-component', '我是A')">添加A组件</button>
        <button @click="add('b-component', '我是B')">添加B组件</button>
        <component :is="item.component" :text="item.text" v-for="item in items"></component>
      </div>
      
      <script>
        const aComponent = Vue.extend({
            props: ['text'],
            template: '<li>A Component: {{ text }}</li>'
        })
        
        const bComponent = Vue.extend({
            props: ['text'],
            template: '<li>B Component: {{ text }}</li>'
        })
        
        new Vue({
            el: '#app',
            data () {
                return {
                    message: 'Hello Vue.js!',
                    items: []
                }
            },
            methods: {
                add (name, text) {
                    this.items.push({
                        component: name,
                        text: text
                    })
                }
                },
                components: {
                    aComponent,
                    bComponent
                }
        })
      </script>
      
      
</body>
</html>